<template>
  <div class="ma">
    <div class="titleBar" :style="blockStyle">
      <div class="disf">
        <div class="upload_div" :style="leftImageRadius">
          <vimage v-if="data.img" class="bg_img" :src="data.img" ></vimage>
          <img class="bg_img" src="@/assets/images/banner.png" v-else />
        </div>
        <p class="txt">{{data.content.left}}</p>
      </div>

      <div class="disf">
        <div class="bian" :style="buttomStyle">
          <p class="cright" :style="posRightStyle">
            <i :class="data.content.right_icon" :style="colorRightIcon"></i>
            &nbsp;<span>{{data.content.right}}</span>
          </p>
        </div>
        <i class="el-sc-cuo11 iconstyle" :style="buttomColorRightIcon"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  created() {},
  watch: {},
  computed: {
    blockStyle() {
      let s =
        "margin:" +
        this.data.margin.top +
        "px " +
        this.data.margin.lr / 2 +
        "px " +
        this.data.margin.bottom +
        "px;";
      s += "border-radius:" + this.data.radius.template_radius + "px;";
      s += "background:" + this.data.color.bg + ";";
      s += "color:" + this.data.color.left + ";";
      s += "justify-content:" + this.data.posAlign + ";";
      return s;
    },
    colorLeftIcon() {
      return "color:" + this.data.color.left_icon + ";";
    },
    posRightStyle() {
      let s = "right:" + this.data.margin.lr / 4 + "px;";
      s += "color:" + this.data.color.right + ";";
      return s;
    },
    colorRightIcon() {
      return "color:" + this.data.color.right_icon + ";";
    },
    buttomColorRightIcon() {
      return "color:" + this.data.color.right_buttom_icon + ";";
    },
    leftImageRadius() {
      return "border-radius:" + this.data.radius.image_radius + "px;";
    },
    buttomStyle(){
      let s = "border-radius:" + this.data.radius.button_radius + "px;" + "background:" + this.data.color.right_buttom_bg + ";";
      return s;
    }
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.bian {
  height: 25px;
  display: block;
}
.ma {
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.titleBar {
  display: flex;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0px 8px;
  justify-content: space-between;
  .txt {
    margin: 0;
    padding: 0 5px;
    font-size: 14px;
  }

  .cright {
    margin: 0;
    padding: 0 5px;
    font-size: 12px;
    line-height: 25px;
    display: flex;
    text-align: center;
    align-items: center;
    flex-shrink: 0;
    span{
      margin-left: 5px;
    }
  }
}
.upload_div {
  width: 28px;
  height: 28px;
  overflow: hidden;
  display: flex;
  flex-shrink: 0;
  img {
    width: 100%;
    height: 100%;
  }
}
.iconstyle {
  padding-top: 5px;
  margin-left: 5px;
}
.disf{
    display: flex;
    align-items: center;
}
</style>
